<template>
  <el-tree
    :data="menus"
    node-key="catId"
    :props="defaultProps"
    ref="menuTree"
    @node-click="nodeclick"
  >
  </el-tree>
</template>

<script>
export default {
  name: "RenrenFastVueMasterCategory",

  data() {
    return {
      // 三级分类的数据
      menus: [],
      // 孩子结点 以及显示的名字
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  created() {
    // 获取我们的菜单数据
    this.getMenus();
  },

  mounted() {},

  methods: {
    // 2.点击子组件的每一个item然后触发一个事件
    nodeclick(data, node, component) {
      console.log("子组件category的结点被点击", data, node, component);

      // 向父组件发送事件(事件名字随便写)
      this.$emit("tree-node-click", data, node, component);
    },

    // 1.获取三级菜单
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get",
      }).then(({ data: res }) => {
        if (res.msg === "success") {
          // console.log(res);
          this.menus = res.data;
        } else {
          this.$message({
            type: "error",
            message: "获取三级菜单失败",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>